<template>
	<view class="become-rider">
		<NavBar title="成为信购骑手" bgc="#ffe581"/>
		<view class="top"> </view>
		<view class="content-box">
			<view class="content">
				<view class="title"> 填写报名信息 </view>
				<uni-forms ref="formRef" :rules="rules" :model="riderInfo">
					<uni-forms-item name="name">
						<view class="item">
							<view class="label"> 姓名 </view>
							<uni-easyinput class="easy-input" v-model="riderInfo.name" placeholder="请输入姓名" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="mobile">
						<view class="item">
							<view class="label"> 手机号 </view>
							<uni-easyinput class="easy-input" v-model="riderInfo.mobile" placeholder="请输入手机号" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="code">
						<view class="item">
							<view class="label"> 验证码 </view>
							<view class="value">
								<uni-easyinput class="easy-input" v-model="riderInfo.code" placeholder="请输入验证码" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
								<YZM :mobile="riderInfo.mobile" @getYzm="getYzm" />
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="region">
						<view class="item">
							<view class="label"> 意向工作城市 </view>
							<view class="value">
								<view class="text">
									<picker @change="change" mode="multiSelector" :range="cityList" range-key="label" @columnchange="columnchange">
										{{ region?region:'请选择意向工作城市' }}
									</picker>
								</view>
								<image src="/static/icon/order/right.png" class="right" />
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="detail_address">
						<view class="item">
							<view class="label"> 意向工作地点 </view>
							<view class="value" @tap="chooseAddress">
								<view class="text"> {{ riderInfo.detail_address?riderInfo.detail_address:'请选择意向工作地点' }} </view>
								<image src="/static/icon/order/right.png" class="right" />
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="id_code">
						<view class="item">
							<view class="label"> 证件号 </view>
							<uni-easyinput class="easy-input" v-model="riderInfo.id_code" placeholder="请输入身份证号码" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="id">
					<view class="label"> 上传证件 </view>
					<IDBOX @idImg="chooseID"/>
				</view>
			</view>
			<!-- <view class="dls">
				<view class="dls-name"> 代理商邀请&nbsp;&nbsp;<text>湖南省长沙市长沙县代理</text> </view>
				<view class="peo"> 邀请人：张飒 岳麓区代理商 </view>
			</view> -->
			<view class="btn">
				<view class="auth">
					<uni-icons type="checkbox-filled" size="16" color="#FF3B1E" />
					<view class="xy">《个人信息授权协议》<text>阅读并同意协议</text> </view>
				</view>
				<view class="button" @tap="submit"> 立即报名 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import YZM from '@/components/YzmBtn.vue'
	import NavBar from '@/components/NavBar.vue';
	import IDBOX from '@/components/IDBOX.vue'
	import { isMobile, isCardID, isNull } from '@/utils/valdate.js'
	import { GetRegionApi, BecomeRiderApi, uploadImgApi, GetYzmApi, GetApplyRiderApi } from '@/service/index.js'
	import { useAddressStore, useUserStore, useMiddleWare } from '@/store/index.js'
	const formRef = ref()
	const riderInfo = ref({
		name: '',
		mobile: '',
		latitude: '', //维度
		longitude: '', //经度
		region: '', // 省市区省市区接口所得
		detail_address: '', // 详细地址
		id_code: '',
		id_img_1: '',
		id_img_2: '',
		id_img_3: '',
		tid: '',
		code: '' // 验证码
	})
	const idObj = ref({
		id_img_1: '',
		id_img_2: '',
		id_img_3: ''
	})
	const region = ref('') // 此字段进攻展示
	const cityList = ref([[],[],[]])
	const columnchange = (e) => {
		const { detail } = e
		console.log(detail);
		if(detail.column === 2) return
		let region = cityList.value[detail.column][detail.value].value
		getRegion(region, detail.column)
	}
	const change = (e) => {
		let arr = []
		e.detail.value.forEach((item, index) => {
			arr.push(cityList.value[index][item].label)
			if(index == 2) [
				riderInfo.value.region = cityList.value[index][item].value
			]
		})
		region.value = arr.join(' ')
	}
	const getRegion = (region,index) => {
		GetRegionApi({region}).then(res => {
			cityList.value[index+1] = res
			if(index == 0) {
				GetRegionApi({region: cityList.value[index+1][0].value}).then(sec => {
					cityList.value[index+2] = sec
				})
			}
		})
	}
	const rules = {
		mobile: isMobile(),
		name: isNull('姓名'),
		code: isNull('验证码'),
		region: isNull('工作城市'),
		detail_address: isNull('工作地点'),
		id_code: isCardID()
	}
	const goBack = () => {
		uni.navigateBack()
	}
	// 获取验证码
	const getYzm = () => {
		let params = {
			mobile: riderInfo.value.mobile,
			type: 'rider'
		}
		GetYzmApi(params)
	}
	// 选择详细地址
	const chooseAddress = async () => {
		const { lonlat } = useAddressStore()
		uni.chooseLocation({
			latitude: lonlat.latitude,
			longitude: lonlat.longitude,
			success: (res) => {
				riderInfo.value.detail_address = res.address
			}
		})
	}
	//  上传身份证
	const chooseID = (img) => {
		idObj.value = img
	}
	// 立即报名
	const submit = () => {
		const { tid } = useMiddleWare()
		const { lonlat } = useAddressStore()
		formRef.value.validate().then(() => {
			const { id_img_1, id_img_2, id_img_3 } = idObj.value
			if(!id_img_1) return getApp().globalData.toast('请上传身份证正面照片')
			if(!id_img_2) return getApp().globalData.toast('请上传身份证反面照片')
			if(!id_img_3) return getApp().globalData.toast('请上传手持身份证照片')
			let params = { 
				...riderInfo.value, 
				...idObj.value,
				latitude: lonlat.latitude,
				longitude: lonlat.longitude,
				tid
			}
			BecomeRiderApi(params).then(res => {
				let navParams = {
					tit: '报名信息提交成功',
					tips: '报名信息提交成功，平台收到信息会在5个工作日内更您核实信息，请耐心等待！',
					submitText: '返回首页'
				}
				uni.navigateTo({
					url: `/pages/auditStatus/auditStatus?title=报名成功&params=${JSON.stringify(navParams)}`
				})
			})
		})
	}
	const editInfo = () => {
		isRider.value = -1
	}
	const isRider = () => {
		const { GETUSERINFO } = useUserStore()
		// -1=未申请 0=待审核 1=已通过 2=已驳回
		GetApplyRiderApi().then(res => {
			let navParams = {}
			let title = ''
			if (res.status == 0) {
				title = '入驻申请'
				navParams = {
					title: '报名信息提交成功',
					tips: '报名信息提交成功，平台收到信息会在5个工作日内更您核实信息，请耐心等待！'
				}
				uni.redirectTo({
					url: `/pages/auditStatus/auditStatus?title=${title}&params=${JSON.stringify(navParams)}`
				})
			} else if (res.status == 1) {
				GETUSERINFO()
				uni.redirectTo({ url: '/pages/riderPages/riderHome/riderHome' })
			} else if (res.status == 2) {
				title = '入驻申请'
				navParams = {
					tips: '您可能信息提交有误，可以联系您当地的代理商！也可以编辑信息后继续提交审核！',
					imgType: 'error',
					errText: res.reject_msg,
					cancelText: '返回首页',
					submitText: '编辑信息'
				}
				uni.redirectTo({
					url: `/pages/auditStatus/auditStatus?title=${title}&params=${JSON.stringify(navParams)}`
				})
			}
		})
	}
	onLoad((e) => {
		const { rider, tid } = e
		const { SETLONLAT } = useAddressStore()
		const { SETTID } = useMiddleWare()
		SETLONLAT()
		GetRegionApi().then(res => {
			cityList.value[0] = res
			GetRegionApi({region: cityList.value[0][0].value}).then(sec => {
				cityList.value[1] = sec
				GetRegionApi({region: sec[0].value}).then(thi => {
					cityList.value[2] = thi
				})
			})
		})
		if(!rider) isRider()
		if(tid) SETTID(tid)
	})
</script>

<style lang="scss" scoped>
	.become-rider {
		width: 100%;
		background: linear-gradient(180deg, #FFE479 1%, #FFE8A9 98%);
		.top {
			width: 100%;
			height: 296px;
			background: url('/static/icon/mine/bg.png') no-repeat center center;
			background-position: 0 -44px;
			background-size: 100% 100%;
		}
		.content-box {
			padding: 10px 12px;
		}
		.content {
			border-radius: 10px;
			background-color: #fff;
			box-sizing: border-box;
			padding: 28px 10px 10px;
			transform: translateY(-119px);

			.title {
				color: #333333;
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			.uni-forms-item {
				margin-bottom: 0;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.item {
					height: 50px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						margin-right: 10px;
						position: relative;
						&::before {
							position: absolute;
							top: 0;
							right: -7.5px;
							display: block;
							content: '*';
							color: red;
							font-size: 16px;
						}
					}
					.value {
						flex: 1;
						color: #c4c4c4;
						font-size: 14px;
						font-weight: 400;
						line-height: 14px;
						margin-left: 10px;
						padding-right: 10px;
						display: flex;
						align-items: center;
						justify-content: end;
						.text {
							flex: 1;
							color: #c4c4c4;
							font-size: 14px;
							font-weight: 400;
							line-height: 14px;
							text-align: right;
						}
						.right {
							width: 14px;
							height: 14px;
						}
					}
					.easy-input {
						flex: 1;
						color: #c4c4c4;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
						margin-left: 10px;
					}
				}
			}
			:deep(.uni-forms-item__error) {
				left: 0;
				top: 100%;
				right: 12px;
				font-size: 12px;
				text-align: right;
				padding-bottom: 3px;
				transform: translateY(-100%);
			}
			.id {
				.label {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					margin-top: 20px;
					margin-bottom: 9px;
					position: relative;
					&::before {
						position: absolute;
						top: 0;
						left: 56px;
						display: block;
						content: '*';
						color: red;
						font-size: 16px;
					}
				}
				// .id-box {
				// 	display: grid;
				// 	grid-template-columns: repeat(2, 1fr);
				// 	gap: 11px 10px;
				// 	box-sizing: border-box;
				// 	.id-item {
				// 		text-align: center;
				// 		display: flex;
				// 		flex-direction: column;
				// 		color: #999999;
				// 		font-size: 14px;
				// 		font-weight: 400;
				// 		line-height: 20px;
				// 		image {
				// 			width: 100%;
				// 			margin-bottom: 9px;
				// 		}
				// 	}
				// }

				// .tips {
				// 	margin-top: 6px;
				// 	color: #FF3B1E;
				// 	font-size: 12px;
				// 	font-weight: 400;
				// 	line-height: 20px;
				// }
			}
		}

		.dls {
			transform: translateY(-119px);
			padding-top: 15px;
			.dls-name {
				color: #111111;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;

				text {
					color: #7E7354;
					font-size: 14px;
					font-weight: 400;
				}
			}
			.peo {
				font-weight: 400;
				font-size: 14px;
				color: #7E7354;
				line-height: 20px;
			}
		}
		.btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 110px;
			padding: 11px 12px 0;
			background-color: #fff;
			box-sizing: border-box;
			.auth {
				display: flex;
				align-items: center;
				.xy {
					color: #FF3B1E;
					font-size: 13px;
					margin-left: 2px;
					font-weight: 400;
					line-height: 18px;
					text {
						color: #999999;
					}
				}
			}
			.button {
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				margin-top: 10px;
				font-weight: 500;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
	}
</style>